<template>
    <div class="aui-content">
        <ul class="aui-list aui-media-list choose_list" style="border-bottom: 1px solid rgba(232, 232, 232, 1);">
            <li class="aui-list-item" style=" text-align: left;">
                <div style="height:2.1rem;line-height: 2.1rem;">
                    <p style="display:inline-block;width:3.6rem;">用餐门店</p>
                    <h3 style="display:inline-block;">{{storeName?storeName:"宁家鲜生"}}</h3>
                </div>
                <div style="padding-left:3.6rem;border-bottom: 1px solid rgba(232, 232, 232, 1);height:2.1rem;line-height:2.1rem;">
                    <!-- <input type="text" placeholder="具体地址详细地址信息"> -->
					<p style="display:inline-block;">{{address}}</p>
                </div>
                
                <div style="border-bottom: 1px solid rgba(232, 232, 232, 1);height:2.1rem;line-height: 2.1rem;position:relative; padding-right: .4rem;">
                    <p  style="display:inline-block;width:3.6rem;">预约手机</p>
                    <span style="display:inline-block;">
						<input type="text" ref="content"  v-model="mobiles" v-on:blur="changeCount(mobiles)"/>
					</span>
					<span style="position:absolute;right:0.5rem;"  @click="getBurl()">
						<i class="icon njfont nj-bianji" style="color:;font-size: 1rem;"></i>
					</span>
					
                </div>
                
                <div style="height:2.1rem;line-height: 2.1rem;">
                    <p style="display:inline-block;width:3.6rem;">用餐方式</p>
                    <div style="display:inline-block;height:1.2rem;">
                        <div style="display:inline-block;" @click.stop ="canteen"><span :class="{active : real }" style="padding: 0.15rem 0.8rem;border: 1px solid rgba(153, 153, 153, 1);font-size:0.7rem;color: #999999;">到店堂食</span></div>
                        <div style="display:inline-block;" @click.stop ="pack"><span :class="{active : rids }" style="padding: 0.15rem 0.8rem;border: 1px solid rgba(153, 153, 153, 1);font-size:0.7rem;color: #999999;">到店打包</span></div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
	import axios from "axios";
	// import api from "../../api";
	import {Popup, MessageBox} from 'mint-ui';
	import { mapState, mapGetters, mapMutations } from "vuex";
	import {Toast} from '../../../utils/toast';
	export default {
		data(){
			return {
				ParentOrderNos:"",
				rids:null,//到店食堂和打包的选中
				real:true,//到店食堂和打包的选中
				storeName:"",//当前门店的名称
				address:"",//当前门店的名称的详细地址
				mobiles:null,
				focusStatus:null,
			}
		},
      	props: {
	      	userPhone: {
		        type: Object,
	//		        default: () => {
	//		          return false
	//		        }
		        required:true
		    },
	// 	    types: {
	// 	        type: Boolean,
	// //		        default: () => {
	// //		          return false
	// //		        }
	// 	        required:true
	// 	    },
	    },
	    computed: {
			 ...mapGetters('qxz',[
				'getStoreList',
			]),
	    	getBillList() {
                return this.$store.state.hzh.getBillInfor;
            },
            getBillContent() {
                return this.$store.state.hzh.BillContent;
			},
			// getStoreList() {
            //     return this.$store.state.qxz.storeList;
			// },
			inputs(){
				return this.mobiles;
			},
			getDoorShop(){
				return this.$store.state.hzh.foodInfor2;
			},
			getFoodMobile(){
				return this.$store.state.hzh.foodInfor1;
			},
            
	    },
		components:{

		},
		watch:{
			inputs(newdatas){
				console.log("new==11111111111111111",newdatas)
				
				// if(newdatas){
				// 	this.$store.dispatch('hzh/PutFoodInfor', newdatas);
				// }
			}
			
		},
		methods: {
			
			//到店堂食
           canteen(){
			//    if(this.real){
			// 	   this.rids = true;
			// 	   this.real = false;
			// 	   this.$store.dispatch('hzh/PutFoodInfors', "到店打包");
			//    }else{
				   this.real = true;
				   this.rids = false;
				   this.$store.dispatch('hzh/PutFoodInfors', "到店堂食");
			//    }

			   console.log("112233",this.mobiles)
		   },
	       //到店打包     
	        pack(){
				// if(this.rids){
				//    this.rids = false;
				//    this.real = true;
				//    this.$store.dispatch('hzh/PutFoodInfors', "到店堂食");
				// }else{
					this.real = false;
					this.rids = true;
					this.$store.dispatch('hzh/PutFoodInfors', "到店打包");
				// }
			},
			//获取门店信息
			getDoorInfo(){
				// this.storeName = localStorage.getItem("storeCode");

			},
			//获取门店详细信息地址
			async detailDoorInfo(){
				let storeCode = localStorage.getItem("storeCode");
				console.log("storeCode,getStoreList",this.getStoreList,storeCode)
				await this.getStoreList && this.getStoreList.forEach(element => {
					if(element.storeId == storeCode ){
						this.address = element.address;
						this.storeName = element.storeName;
					}
				});
			},
			//保存电话和用餐方式到vuex
			putInformationInVuex(){
				// if(this.mobiles == ""){
					this.$store.dispatch('hzh/PutFoodInfor', this.userPhone.mobile);
				// }
				// this.$store.dispatch('hzh/PutFoodInfors', "到店堂食");
			},
			changeCount(val){
				var myreg=/^[1][0-9]{10}$/;
				// if(val == ""){
				// 	Toast({
                //         message: '手机号码不能为空',
                //         duration: 1000,
                //         type: 'fail'
				// 	});
					
				// 	return;
				// }
				if(!myreg.test(val)){
					this.mobiles ="";
					 this.$store.dispatch('hzh/PutFoodInfor', "");
					Toast({
                        message: '手机号码格式不正确',
                        duration: 1000,
                        type: 'fail'
					});
					
					return;
				}else{
					this.mobiles =val;
					this.$store.dispatch('hzh/PutFoodInfor', val);
				}
			},
			getBurl(){
				 this.$refs.content.focus()
			}
			
		},
		async created(){
			this.getDoorInfo();
			await this.detailDoorInfo();
			this.putInformationInVuex();
			if(this.getDoorShop == "到店堂食"){
				this.rids = false;
				this.real = true;
			}else if(this.getDoorShop == "到店打包"){
				this.real = false;
				this.rids = true;
			}else{
				this.rids = false;
				this.real = true;
				this.$store.dispatch('hzh/PutFoodInfors', "到店堂食");
			}
			if(this.getFoodMobile){
				this.mobiles = this.getFoodMobile;
			}else{
				this.mobiles = this.userPhone.mobile
			}
		},
		mounted() {
			
		},
	}
	
</script>

<style>
	.active{
		border:1px solid #38B035 !important;
		color:#38B035 !important;
		background-color: #e9f5e9;
	}
</style>